<template>
    <div>
        <div class="tit">
            <ul class="tit1">
                <li class="tit3" @click="changeli()">
                    <div>生活区 <img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="jiance">
                        <li class="tit2" @click="change0">生活区1</li>
                        <li class="tit2" @click="change1">生活区2</li>
                        <li class="tit2" @click="change2">生活区3</li>
                    </ul>
                </li>
            </ul>
            <ul class="tit1">
                <li class="tit3" @click="changeli1()">
                    <div>项目部 <img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="jiance1">
                        <li class="tit2" @click="change3">项目部东</li>
                        <li class="tit2" @click="change4">项目部西</li>
                    </ul>
                </li>
            </ul>
            <ul class="tit1">
                <li class="tit3" @click="change5">
                    <div>围墙<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
            </ul>
            <ul class="tit1">
                <li class="tit3" @click="change6">
                    <div>食堂<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
            </ul>
            <ul class="tit1">
                <li class="tit3" @click="change7">
                    <div>储水区<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
            </ul>
            <ul class="tit1">
                <li @click="changeli5()" class="tit3">
                    <div>办公区<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="jiance2">
                        <li class="tit2" @click="change8">办公区1</li>
                        <li class="tit2" @click="change9">办公区2</li>
                        <li class="tit2" @click="change10">办公区3</li>
                        <li class="tit2" @click="change11">办公区4</li>
                        <li class="tit2" @click="change12">办公区5</li>
                        <li class="tit2" @click="change13">办公区6</li>
                        <li class="tit2" @click="change14">办公区7</li>
                    </ul>
                </li>
            </ul>

            <ul class="tit1">
                <li @click="changeCut('md')" class="tit3">
                    <div>门吊<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="mdShow">
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/1.hd.live')">100t门吊（东区）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/2.hd.live')">100t门吊（西区）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/3.hd.live')">450t门吊（西侧）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/4.hd.live')">450t门吊（东）</li>
                    </ul>
                </li>
            </ul>
            <ul class="tit1">
                <li  @click="showVideo('ezopen://open.ys7.com/F98655064/5.hd.live')" class="tit3">
                    <div>
                        梁场大门<img
                            class="triangleImg"
                           
                            src="../../assets/img/xia.png"
                            alt=""
                        />
                    </div>
                </li>
            </ul>
            <ul class="tit1">
                <li @click="changeCut('gj')" class="tit3">
                    <div>钢筋加工厂<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="gjShow">
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/6.hd.live')">梁场钢筋加工厂（东）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/8.hd.live')">梁场钢筋加工厂（西）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/7.hd.live')">钢筋加工厂（西）</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/9.hd.live')">钢筋加工厂（东）</li>
                    </ul>
                </li>
            </ul>
            <ul class="tit1">
                <li @click="changeCut('bh')" class="tit3">
                    <div>拌合站<img class="triangleImg" src="../../assets/img/xia.png" alt="" /></div>
                </li>
                <li>
                    <ul v-show="bhShow">
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/11.hd.live')">拌合站</li>
                        <li class="tit2" @click="showVideo('ezopen://open.ys7.com/F98655064/10.hd.live')">拌合站2</li>
                    </ul>
                </li>
            </ul>
        </div>

        <div id="playWind" style=""></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';

export default {
    components: { Pagination },
    directives: { waves },
    props: {},
    data() {
        return {
            jiance: false,
            jiance1: false,
            jiance2: false,
            gjShow: false,
            bhShow: false,
            mdShow: false,
            decoder: null,
            ezopenUrl: 'ezopen://open.ys7.com/F58891617/1.hd.live',
            token: ''
        };
    },
    watch: {},
    computed: {},
    methods: {
        showVideo(url) {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: url,
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
            // this.blockShow = true;
        },

        changeli() {
             this.jiance = true;
            this.jiance1 = false;
            this.jiance2 = false;
            this.gjShow = false;
            this.bhShow = false;
            this.mdShow = false;
        },
        changeli1() {

            this.jiance = false;
            this.jiance1 = true;
            this.jiance2 = false;
            this.gjShow = false;
            this.bhShow = false;
            this.mdShow = false;
        },
        changeli5() {
              this.jiance = false;
            this.jiance1 = false;
            this.jiance2 = true;
            this.gjShow = false;
            this.bhShow = false;
            this.mdShow = false;
        },
        changeCut(value) {
            console.log(value);
            switch (value) {
                case 'gj':
                    this.jiance = false;
                    this.jiance1 = false;
                    this.jiance2 = false;
                    this.gjShow = true;
                    this.bhShow = false;
                    this.mdShow = false;
                    break;
                case 'bh':
                    this.jiance = false;
                    this.jiance1 = false;
                    this.jiance2 = false;
                    this.gjShow = false;
                    this.bhShow = true;
                    this.mdShow = false;
                    break;
                case 'md':
                    this.jiance = false;
                    this.jiance1 = false;
                    this.jiance2 = false;
                    this.gjShow = false;
                    this.bhShow = false;
                    this.mdShow = true;
                    break;
            }
        },

        change0() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/1.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },
        change1() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/2.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },
        change2() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/9.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },
        change3() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/3.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change4() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/4.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change5() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/5.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change6() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/6.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change7() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/7.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change8() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/11.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change9() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/8.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change10() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/10.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change11() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/12.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change12() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/13.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change13() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/14.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        change14() {
            this.onStop();
            this.token = localStorage.getItem('vidiotoken');
            // alert(this.token)
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/15.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        },

        onStop() {
            this.decoder.stop();
            console.log('结束');
        },
        onInit() {
            this.token = localStorage.getItem('vidiotoken');
            this.decoder = new EZUIKit.EZUIPlayer({
                id: 'playWind',
                autoplay: true,
                url: 'ezopen://open.ys7.com/F58891617/1.hd.live',
                accessToken: this.token,
                decoderPath: '/static/ezui',
                width: 1560,
                height: 840
            });
        }
    },

    mounted() {
        this.onInit();
    },
    destroyed() {
        this.onStop();
    }
};
</script>
<style scoped>
.tit2 {
    font-size: 16px;
    color: #00fff6;
    width: 200px;
}

li {
    list-style: none;
    line-height: 45px;
}

.triangleImg {
    width: 20px;
    height: 10px;
    margin-left: 5px;
}
#playWind {
    width: 1550px;
    height: 840px;
    float: left;
    align-content: center;
    margin: 10px auto;
    border: 1px #00f6ff solid;
    border-radius: 5px;
}
.tit {
    padding: 10px 0;
    margin-left: 60px;
    float: left;
    width: 222px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.tit1 {
    cursor: pointer;
    width: 255px;
    list-style-type: none;
    line-height: 60px;
    font-size: 26px;
    text-align: center;
    color: white;
}
.tit3 {
    font-size: 18px;
    width: 200px;
    height: 36px;
    line-height: 36px;
    padding: 5px 0;
    background: #01081b;
    border: 1px solid #508daf;
    text-align: center;
}
</style>